@CHARSET "EUC-KR";

/* default */
html, body {height:100%; padding:0; margin:0}
ul {list-style: none; margin:0; padding:0}
li {display:inline-block; margin:0; padding:0;}
a {text-decoration: none; border:none;}
img {border:0}
button {border:0}
input {border:0}
form {padding:0; margin:0}

input[type="range"]{
    background: #333333;
    width: 130px;
    height: 6px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -wekkit-border-radius: 8px;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}

input[type="range"]:hover{
    background: #999;
    width: 130px;
    height: 6px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -wekkit-border-radius: 8px;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}

/* index */
.indexBody {background:url("img/wood.jpg")/*  linear-gradient(to top, #e0f3fa 0%,#d8f0fc 65%,#a6dbf4 100%) */; text-align:center;}
#strokeStyleSelect {background: transparent; border: solid 1px #666; border-radius: 5px; font-size: 12px; height: 20px; padding-left: 5px; margin-left:20px}
#fillStyleSelect {background: #666; border: none; border-radius: 5px; font-size: 12px; height: 20px; padding-left: 5px; margin-right:65px;}
#drawMode {background: #ddd; border: none; border-radius: 5px; font-size: 12px; height: 20px;padding-left: 5px; margin-left:10px;}
#eraserShapeSelect {background: #ddd; border: none; border-radius: 5px; font-size: 12px; height: 20px; padding-left: 5px; margin:0 90px 0 10px;}
#WidthSelect {margin-left:10px}
.indexBody .cont {width:540px; height:130px; display:inline-block; margin-top:300px}
.menu01 {width:200px; height:200px; background:url("img/paint.png") no-repeat 0 0; cursor: pointer; background-size:200px 200px}
.menu02 {width:200px; height:200px; background:url("img/video.png") no-repeat 0 0; margin-left:100px; cursor: pointer; background-size:200px 200px}
.indexBody .cont li .menuText01 {color:#9900ff; font-weight:bold; font-family:dotum; font-size:25px; }
.indexBody .cont li .menuText02 {color:#009966; font-weight:bold; font-family:dotum; font-size:25px; padding-left:90px}
#eraseAll {margin-left:130px; background:url("img/new_page.png") no-repeat 0 -2px; width:30px; height:30px; display:inline-block; vertical-align: middle;}

/* parent */
.topMenu {padding-left:30px; text-align: left;}
.topMenu span {display:inline-block; line-height:70px; height:70px; font-size:30px; color:#fff; font-weight:bold; font-family:tahoma}
.topMenu .topHome {display:inline-block; height:32px; width:32px; background: url("img/top_home.png") no-repeat 0 0; background-size:32px 32px; vertical-align: middle}
.topMenu .topPaint {display:inline-block; height:32px; width:32px; background: url("img/top_paint.png") no-repeat 0 0; background-size:32px 32px; vertical-align: middle; margin-left:5px}
.topMenu .topPaint01 {display:inline-block; height:45px; width:45px; background: url("img/top_paint.png") no-repeat 0 0; background-size:45px 45px; vertical-align: middle; margin-left:5px}
.topMenu .topVideo {display:inline-block; height:45px; width:45px; background: url("img/top_video.png") no-repeat 0 0; background-size:45px 45px; vertical-align: middle; margin-left:5px}
.topMenu .topVideo01 {display:inline-block; height:32px; width:32px; background: url("img/top_video.png") no-repeat 0 0; background-size:32px 32px; vertical-align: middle; margin-left:5px}
.topMenu ul li a:LINK,:VISITED {font-size:14px; font-family:dotum; font-weight:bold; color:white}
.btnsWrap { height:70px; width:1024px; line-height:70px; background:#333333; border-radius:15px 15px 0px 0px }
.btnsWrap li button {background:transparent; color:#336699; font-family:dotum; font-weight:bold;}
.btnsWrap li input {background:transparent; color:#336699; font-family:dotum; font-weight:bold;}


/* paint */
.paintBody {background:url("img/wood.jpg"); text-align:center;}
.paintWrap {width:1024px; height:850px; display:inline-block; background:#999; margin-top:30px; border-radius:15px;}
.paintBtns {text-align:left; float:left; width:500px}
.ctrPaint {width: 972px; text-align: left; margin-left: 37px; height: 50px; line-height: 50px; background:url("img/bg_top.png") no-repeat 0 0; padding-left:15px}
.canvas {box-shadow: 1px 1px 6px 3px #666; background:white;  }
.paintBody .ctrPaint img {vertical-align: text-top;}

/* video */
.videoBody {background:url("img/wood.jpg"); text-align:center;}
.videotWrap {width:1024px; height:850px; display:inline-block; background:#999; margin-top:30px; border-radius:15px}
.btnsWrap02 { height:50px; width:909px; line-height:50px; background:#999; margin-left:15px}
.btnsWrap02 li {vertical-align: middle; margin-right:20px; margin-top:20px;}
.videoBtns {text-align:left; width:924px; padding-left:100px; height:80px}
.placeholder {clear:both; display:inline-block;}
.direction {margin:15px}
.directionDiv {text-align:left; margin:15px; width:482px}
.directionDiv .direction li {display:block; font-family:sans-serif; font-size:13px; color:#333; line-height:18px}
.directionDiv .direction li:FIRST-CHILD {font-size:15px; color:#000; font-weight:bold;}
.bottomLeft {display:inline-block; width:612px; float:left;}
#bottomRight {display:inline-block; width:412px; float:left; text-align: left; margin-top:15px}
#captureImage { position: absolute; }


	/* buttons */
	.btn_load {background:url("img/btn_load.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
	.btn_play {background:url("img/btn_play.png") no-repeat 0 0; height:50px; width:50px; display:inline-block}
	.btn_slow {background:url("img/btn_slow.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
	.btn_fast {background:url("img/btn_fast.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
	.btn_pause {background:url("img/btn_pause.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
	.btn_mute {background:url("img/btn_mute.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
	.btn_jump_neg {background:url("img/btn_jump_neg.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
	.btn_jump_pas {background:url("img/btn_jump_pas.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
	.btn_restart {background:url("img/btn_restart.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
	.btn_smaller {background:url("img/btn_smaller.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
	.btn_bigger {background:url("img/btn_bigger.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
	.btn_capture {background:url("img/btn_capture.png") no-repeat 0 0; height:30px; width:30px; display:inline-block}
